<template>
  <view>
    <view class="header">
      <view class="pusheractive" :class="{ common: index == 0 }" @click="getmyactlist">TA发布的活动</view>
      <view class="addinative" :class="{ common: index == 1 }" @click="gtemyaddactlist">TA参加的活动</view>
    </view>
    <!-- 活动板块 -->
    <scroll-view scroll-y="true" @scrolltolower="moredata" style="height: 1500rpx">
      <view v-if="index == 0">
        <view class="activelist" v-for="(item, index) in otheractlist" :key="item.id" @click="godetail(item.id)">
          <view class="left">
            <image :src="item.cover_image" mode="aspectFill" />
            <text :class="{ baoming: item.status == 1 || item.status == 2, yijieshu: item.status == 3 || item.status == 4, yibaoming: item.status == 0 }">
              {{ item.status_texts }}
            </text>
          </view>
          <view class="right">
            <view class="title overline">{{ item.title }}</view>
            <view class="time">
              <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
              {{ item.start_time_text + '/' + item.end_time_text }}
            </view>
            <view class="time">
              <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
              {{ item.address }}
            </view>
            <view style="display: flex; justify-content: space-between">
              <view style="font-size: 24rpx">
                <view class="pusher">发起人：{{ item.nickname }}</view>
                <view class="peoplenum">报名人数：{{ item.activity_user_num + '/' + item.max_num }}</view>
              </view>
              <view>
                <button class="btn">报名</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="index == 1">
        <view class="activelist" v-for="(item, index) in otheraddactlist" :key="item.id" @click="godetail(item.id)">
          <view class="left">
            <image :src="item.cover_image" mode="aspectFill" />
            <text :class="{ baoming: item.status == 1 || item.status == 2, yijieshu: item.status == 3 || item.status == 4, yibaoming: item.status == 0 }">
              {{ item.status_texts }}
            </text>
          </view>
          <view class="right">
            <view class="title overline">{{ item.title }}</view>
            <view class="time">
              <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
              {{ item.start_time_text + '/' + item.end_time_text }}
            </view>
            <view class="time">
              <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
              {{ item.address }}
            </view>
            <view style="display: flex; justify-content: space-between">
              <view style="font-size: 24rpx">
                <view class="pusher">发起人：{{ item.nickname }}</view>
                <view class="peoplenum">报名人数：{{ item.activity_user_num + '/' + item.max_num }}</view>
              </view>
              <view>
                <button class="btn">报名</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { timeChange } from '../../utils/tools.js';
export default {
  data() {
    return {
      index: 0,
      otheractlist: [],
      otheraddactlist: [],
      currentId: '',
      hisactpage: 1,
      hisaddactpage: 1
    };
  },
  onLoad(value) {
    console.log(value);
    this.currentId = value.id;
    this.getmyactlist(value.id);
  },
  onShow() {
    this.hisactpage = 1;
    this.hisaddactpage = 1;
    this.otheractlist = [];
    this.otheraddactlist = [];
    this.getmyactlist();
    this.gtemyaddactlist();
  },
  methods: {
    // 更多数据
    async moredata() {
      if (this.index == 0) {
        this.hisactpage++;
        const res = await uni.$http.post('user/getMyActivityList', {
          token: JSON.parse(uni.getStorageSync('userinfo')).token,
          page: this.hisactpage,
          size: 5,
          type: 0,
          to_user_id: this.currentId
        });
        res.data.data.forEach((item) => {
          item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
          item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
          item.endTime = timeChange(item.end_time);
        });
        if (res.data.data.length == 0) {
          return;
        }
        this.otheractlist.push(...res.data.data);
      } else {
        this.hisaddactpage++;
        const res = await uni.$http.post('user/getMyActivityList', {
          token: JSON.parse(uni.getStorageSync('userinfo')).token,
          page: this.hisaddactpage,
          size: 20,
          type: 1,
          to_user_id: this.currentId
        });
        res.data.data.forEach((item) => {
          item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
          item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
          item.endTime = timeChange(item.end_time);
        });
        if (res.data.data.length == 0) {
          return;
        }
        this.otheraddactlist.push(...res.data.data);
      }
    },
    // 获取我的列表
    async getmyactlist() {
      this.index = 0;
      this.otheractlist = [];
      const res = await uni.$http.post('user/getMyActivityList', {
        token: JSON.parse(uni.getStorageSync('userinfo')).token,
        page: 1,
        size: 5,
        type: 0,
        to_user_id: this.currentId
      });
      res.data.data.forEach((item) => {
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      this.otheractlist = res.data.data;
    },
    // 获取他参与的列表
    async gtemyaddactlist() {
      this.index = 1;

      const res = await uni.$http.post('user/getMyActivityList', {
        token: JSON.parse(uni.getStorageSync('userinfo')).token,
        page: 1,
        size: 20,
        type: 1,
        to_user_id: this.currentId
      });
      res.data.data.forEach((item) => {
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      this.otheraddactlist = res.data.data;
    },
    // 跳转到详情页
    godetail(id) {
      uni.navigateTo({
        url: '/sub_active/detail/detail?id=' + id
      });
    }
  }
};
</script>

<style>
.header {
  display: flex;
  margin: 30rpx 70rpx;
  width: 608rpx;
  height: 80rpx;
  border-radius: 50rpx;
  background-color: #f8f8f8;
}
.common {
  color: #fff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
}
.pusheractive {
  text-align: center;
  line-height: 80rpx;
  font-size: 28rpx;
  width: 306rpx;
  height: 80rpx;
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}
.addinative {
  font-size: 28rpx;
  line-height: 80rpx;
  width: 306rpx;
  height: 80rpx;
  text-align: center;
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}
/* 活动列表 */
.activelist {
  display: flex;
  /*  width: 702rpx; */
  /* height: 340rpx; */
  padding: 20rpx;
  margin: 20rpx 24rpx 0rpx 24rpx;
  background-color: #e8f6ff;
}
.left {
  position: relative;
  width: 220rpx;
  height: 300rpx;
  margin-right: 20rpx;
}
.left image {
  width: 220rpx;
  height: 300rpx;
}
.baoming {
  position: absolute;
  color: #fff;
  font-size: 20rpx;
  top: 0;
  left: 0;
  width: 90rpx;
  height: 40rpx;
  border-radius: 30rpx 0 30rpx 0;
  text-align: center;
  line-height: 40rpx;
  background-color: red;
}
.yibaoming {
  position: absolute;
  color: #fff;
  font-size: 20rpx;
  top: 0;
  left: 0;
  width: 90rpx;
  height: 40rpx;
  border-radius: 30rpx 0 30rpx 0;
  text-align: center;
  line-height: 40rpx;
  background-color: #7e7e7e;
}
.yijieshu {
  position: absolute;
  color: #fff;
  font-size: 20rpx;
  top: 0;
  left: 0;
  width: 90rpx;
  height: 40rpx;
  border-radius: 30rpx 0 30rpx 0;
  text-align: center;
  line-height: 40rpx;
  background-color: #999999;
}

.title {
  width: 392rpx;
  height: 80rpx;
  font-weight: 700;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
/* 超出文本省略 */
.overline {
  height: 65px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.time {
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.title {
  width: 392rpx;
  height: 80rpx;
  font-weight: 700;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.btn {
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  background: #0398ff;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  margin-top: 20rpx;
  color: #fff;
}
.pusher {
  margin-bottom: 20rpx;
}
</style>
